<template>
  <div>
    <h1>题目展示</h1>

    <!-- 展示选择题 -->
    <div>
      <h2>一. 单选题</h2>
      <div v-for="(item, index) in singleChoiceQuestions" :key="item.id" class="question-container">
        <div class="question-header">
          <h3>{{ index + 1 }}. {{ item.content }}</h3>
        </div>
        <div v-if="item.question_type === 'single_choice'" class="options-container">
          <div v-for="(option, optionIndex) in item.details.split('\n')" :key="optionIndex" class="option-item">
            <input type="radio" :name="'question-' + item.id" :value="option[0]" v-model="item.userAnswer" class="radio-input" />
            <label class="option-label">{{ option }}</label>
          </div>
        </div>
      </div>
    </div>

    <!-- 展示填空题 -->
    <div>
      <h2>二. 填空题</h2>
      <div v-for="(item, index) in tianKongTiQuestions" :key="item.id" class="question-container">
        <div class="question-header">
          <h3>{{ index + 1 }}. {{ item.content }}</h3>
        </div>
        <div v-if="item.question_type === 'tianKongTi'" class="blank-input-container">
          <input type="text" v-model="item.userAnswer" placeholder="请输入答案" class="blank-input" />
        </div>
      </div>
    </div>

    <!-- 展示判断题 -->
    <div>
      <h2>三. 判断题</h2>
      <div v-for="(item, index) in trueFalseQuestions" :key="item.id" class="question-container">
        <div class="question-header">
          <h3>{{ index + 1 }}. {{ item.content }}</h3>
        </div>
        <div v-if="item.question_type === 'true_false'" class="judge-container">
          <div class="judge-item">
            <input type="radio" :name="'question-' + item.id" value="T" v-model="item.userAnswer" class="judge-input" />
            <label class="judge-label">True</label>
          </div>
          <div class="judge-item">
            <input type="radio" :name="'question-' + item.id" value="F" v-model="item.userAnswer" class="judge-input" />
            <label class="judge-label">False</label>
          </div>
        </div>
      </div>
    </div>

    <div class="submit-container">
      <button @click="submitAnswers" class="submit-button">提交答案</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      list1: [],
      singleChoiceQuestions: [], // 选择题
      tianKongTiQuestions: [],  // 填空题
      trueFalseQuestions: []    // 判断题
    };
  },
  mounted() {
    // 页面加载时获取题目数据
    this.fetchQuestions();
  },
  methods: {
    // 获取题目数据
    async fetchQuestions() {
      try {
        const assignmentId = this.$route.query.id; // 从前端路由中获取 assignmentId
        console.log(assignmentId);
        const response = await axios.get(`http://localhost:80/questions/assignment/${assignmentId}`);
        if (response.data.code === 0) {
          this.list1 = response.data.data.map(item => ({
            ...item,
            userAnswer: "" // 初始化 userAnswer，默认为空字符串
          }));
          // 按题型分类
          this.singleChoiceQuestions = this.list1.filter(item => item.question_type === 'single_choice');
          this.tianKongTiQuestions = this.list1.filter(item => item.question_type === 'tianKongTi');
          this.trueFalseQuestions = this.list1.filter(item => item.question_type === 'true_false');
        } else {
          console.error("获取题目失败:", response.data.message);
        }
      } catch (error) {
        console.error("获取题目失败:", error);
      }
    },
    submitAnswers() {
      console.log(this.list1);
      // Prepare the data to be sent
      const userAnswers = this.list1.map(item => ({
        id: item.id,
        userAnswer: item.userAnswer
      }));

      const assignmentId = this.$route.query.id;

      console.log("提交的答案：", userAnswers); // Check if the data is generated correctly

      // Make a POST request to the backend
      axios.post('http://localhost:80/assignments/submitAnswers', {
        assignmentId: assignmentId,
        userAnswers: userAnswers
      })
          .then(response => {
            // Handle success
            console.log('提交成功:', response.data);
            this.$message.success('答案提交成功，3秒后返回主页');

            // 在三秒后跳转到上一页
            setTimeout(() => {
              this.$router.go(-1); // 使用 Vue Router 的 go 方法返回上一页
            }, 3000);
          })
          .catch(error => {
            // Handle error
            console.error('提交失败:', error);
            this.$message.error('答案提交失败');
          });
    }
  }
};
</script>

<style scoped>
.question-container {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-header {
  margin-bottom: 12px;
}

.question-header h3 {
  font-size: 18px;
  color: #333;
  margin: 0;
}

.options-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-item {
  display: flex;
  align-items: center;
}

.radio-input {
  margin-right: 8px;
}

.option-label {
  font-size: 16px;
  color: #666;
}

.blank-input-container {
  margin-top: 8px;
}

.blank-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 16px;
}

.judge-container {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.judge-item {
  display: flex;
  align-items: center;
}

.judge-input {
  margin-right: 8px;
}

.judge-label {
  font-size: 16px;
  color: #666;
}

h2 {
  font-size: 22px;
  color: #333;
  margin: 24px 0 16px;
  text-align: center;
}

.submit-container {
  text-align: center;
  margin-top: 32px;
}

.submit-button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-button:hover {
  background-color: #45a049;
}

.submit-button:active {
  background-color: #3d8b40;
}

.question {
  margin-bottom: 20px;
}
</style>
